<template>
	<view class="conter">

		<!-- <header-box :title="title"></header-box> -->




		<view class="header" style="color: #000000;" @tap="goBack(id)">
			<view class="arrow">
			</view>
			<view class="title">
				{{title}}
			</view>
		</view>

		<view class="phone">
			<view class="f28" style="width: 100rpx;">
				<text style="color: #FF0000;">*</text>名称:
			</view>
			<view class="f24 borde">
				<input type="text" v-model="title" placeholder="填写场地名称" style="width: 100%; height: 100%;" />
			</view>
		</view>


		<view class="phone">
			<view class="f28" style="width: 100rpx;">
				<text style="color: #FF0000;">*</text>价格:
			</view>
			<view class="f24 borde">
				<input type="text" v-model="price" placeholder="填写价格" style="width: 100%; height: 100%;color: #FF0000;" />
			</view>
		</view>


		<view class="phone" @click="show = true">
			<view class="f28" style="width: 100rpx;">
				<text style="color: #FF0000;">*</text>地址:
			</view>
			<view class="f24 borde">
				<input type="text" v-model="address" placeholder="选择地址" style="width: 100%; height: 100%;" />
			</view>
		</view>
		
		<view class="phone" @click="show = true">
			<view class="f28" style="width: 200rpx;">
				<text style="color: #FF0000;">*</text>详细地址:
			</view>
			<view class="f24 borde">
				<input type="text" v-model="setName" placeholder="详细地址" style="width: 100%; height: 100%;" />
			</view>
		</view>


		<view class="phone" v-if="info == 3">
			<view class="f28" style="width: 135rpx;">
				<text style="color: #FF0000;">*</text>上传图片:
			</view>
		</view>
		<view class="" v-if="info == 3">
			<u-upload :action="action" :file-list="fileList"></u-upload>
		</view>

		<view class="addUpload f34" v-if="info == 3" @tap="addPhone">
			确认上传
		</view>


		<view class="upload-image" v-if="info == 2">
			<u-waterfall v-model="flowList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
						<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
						<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
						
						<u-icon name="close-circle-fill" color="#717171" size="34" class="u-close" @click="remove(item.id)"></u-icon>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
						<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
						
						<u-icon name="close-circle-fill" color="#717171" size="34" class="u-close" @click="remove(item.id)"></u-icon>
					</view>
				</template>
			</u-waterfall>
			
			
			
			<view class="addSting">
				<view class="" style="background-color: #54599B; color:  #DDDEEB;">
					保存
				</view>
				<view class="" style="background-color: #DDDEEB; color: #54599B;">
					删除
				</view>
			</view>
		</view>













		<u-picker mode="region" @confirm="confirm" v-model="show" :default-selector='[0, 1, 3]'></u-picker>





	</view>
</template>

<script>
	const token = uni.getStorageSync('uid')
	export default {
		components: {},
		data() {
			return {
				title: '上传图册',
				action: this.$IMG_URL,
				show: false,
				selector: [1, 2, 3],
				multiSelector: [
					[1, 2, 3],
					[4, 5, 6]
				],
				// 这种情况需要指定range-key为cateName，否则组件不知道该显示对象的哪个属性
				selectorObj: [{
						cateName: '1',
						id: 1
					},
					{
						cateName: '2',
						id: 2
					}
				],
				info: '',
				loadStatus: 'loadmore',
				flowList: [],
				list: [{
						price: 35,
						title: '北国风光，千里冰封，万里雪飘',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
					},
					{
						price: 75,
						title: '望长城内外，惟余莽莽',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
					},
				],
				setName: '',
				price: '',
				title: '',
			}
		},

		onLoad(e) {
			this.info = e.info
			// this.info = 2
			this.addRandomData();
			console.log(e, '0111111111')

		},

		methods: {

			addRandomData() {
				for (let i = 0; i < 10; i++) {
					let index = this.$u.random(0, this.list.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.list[index]))
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			
			// 确定上传
			async addPhone() {
				const res = await this.$u.post('api/hotel.Index/add',{
					uid: token,
					name: this.setName,
					money: this.price,
					address: this.address,
					title: this.title,
				})
			},


			goBack(id) {
				console.log(id)
				uni.navigateBack({
					delta: 1
				})
			},

			// 回调参数为包含多个元素的数组，每个元素分别反应每一列的选择情况
			confirm(e) {
				console.log(e);
			},

			image() {
				console.log(9999);
				uni.previewImage({
					urls: [...this.img],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						},
					},
				});
			},


		}
	}
</script>

<style lang="scss" scoped>
	.conter {
		width: 100%;
		height: 100%;
		padding: 0 20rpx;
		background-color: #FFFFFF;

		image {
			width: 100%;
			height: 100%;
		}



		.header {
			width: 100%;
			height: 150rpx;
			line-height: 150rpx;
			display: flex;
			align-items: center;
			// padding-left: 10rpx;
			padding-top: 30rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			background: #FFFFFF;

			.arrow {
				position: relative;
				display: inline-block;
			}

			.arrow::before {
				content: '';
				width: 10px;
				height: 10px;
				border: 0px;
				border-bottom: solid 2px #2C2C2C;
				border-left: solid 2px #2C2C2C;
				-ms-transform: rotate(45deg);
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
				position: absolute;
				top: 50%;
				left: 0;
				margin-top: -4px;
				margin-left: 28rpx;
			}

			.title {
				margin: 0 auto;
			}
		}


		.phone {
			display: flex;
			align-items: center;
			width: 90%;
			height: 120rpx;


			view {
				height: 80rpx;
				line-height: 80rpx;
			}

			.borde {
				width: 100%;
				margin-left: 16rpx;
				color: #A0A0A0;
				padding-left: 40rpx;
				border-bottom: 1rpx solid #A0A0A0;
			}
		}


		.addUpload {
			width: 80%;
			margin: 0 auto;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			color: #FFFFFF;
			margin-top: 100rpx;
			border-radius: 50rpx;
			background-color: #54599B;
		}
		
		
		.upload-image {
			
			
			.addSting {
				width: 86%;
				height: 300rpx;
				margin: 60rpx auto 0;
				
				view {
					width: 100%;
					height: 100rpx;
					margin: 20rpx 0;
					text-align: center;
					line-height: 100rpx;
					border-radius: 50rpx;
					font-size: 34rpx;
				}
			}
			
			
			
			.demo-warter {
					border-radius: 8px;
					margin: 5px;
					background-color: #ffffff;
					position: relative;
				}
				
				.u-close {
					position: absolute;
					top: 32rpx;
					right: 32rpx;
				}
				
				.demo-image {
					width: 100%;
					border-radius: 4px;
				}
				
				.demo-title {
					font-size: 30rpx;
					margin-top: 5px;
					color: $u-main-color;
				}
				
				.demo-tag {
					display: flex;
					margin-top: 5px;
				}
				
				.demo-tag-owner {
					background-color: $u-type-error;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					padding: 4rpx 14rpx;
					border-radius: 50rpx;
					font-size: 20rpx;
					line-height: 1;
				}
				
				.demo-tag-text {
					border: 1px solid $u-type-primary;
					color: $u-type-primary;
					margin-left: 10px;
					border-radius: 50rpx;
					line-height: 1;
					padding: 4rpx 14rpx;
					display: flex;
					align-items: center;
					border-radius: 50rpx;
					font-size: 20rpx;
				}
				
				.demo-price {
					font-size: 30rpx;
					color: $u-type-error;
					margin-top: 5px;
				}
				
				.demo-shop {
					font-size: 22rpx;
					color: $u-tips-color;
					margin-top: 5px;
				}
		}
		

	}
</style>
